<template>
  <div>
    <h2>Home</h2>
    <!-- router-link 必要带一个to属性 才能使用 -->
    <!-- parsms传参 -->
    <router-link to="/home/music/1">华语music</router-link>/
    <!--也可以使用to用对象的方式使用 但如果需要params传参的话就必须要用name，不能使用path -->
    <router-link
      :to="{
        name: 'music',
        params: {
          id: '2',
        },
      }"
      >英语music</router-link
    >/

    <router-link to="/home/music/3">俄语music</router-link>

    <hr />
    <router-link to="/home/news">去news</router-link>
    <button @click="add">按钮</button>
    <hr />
    <router-link to="/home/list?n=1&m=2">去Lsit</router-link>/
    <router-link :to="{
      name:'list' ,
      query:{
        n:'8',
        m:'9'
      }
      }">去Lsit</router-link>

    <hr />

    <!-- 使用对象形式也可也 -->
    <!-- <router-link
      :to="{
        path: '/home/music',
      }"
      >去music</router-link
    >
    <router-link
      :to="{
        path: '/home/news',
      }"
      >去news</router-link
    > -->

    <!--使用name名字也可也  -->
    <!-- <router-link
      :to="{
        name:'music',
      }"
      >去music</router-link
    >
    <router-link
      :to="{
         name:'news',
      }"
      >去news</router-link
    > -->

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods:{
    add(){
      this.$router.push({
        name:"music",
        params:{
          id:'2'
        }
      })
    }
  }
};
</script>

<style>
</style>